import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:rabbit_mobile/source/language_constant.dart';
import 'package:rabbit_mobile/widget/custom_cache_image_widget/index.dart';
import 'package:shimmer/shimmer.dart';

class HotRecommends extends StatefulWidget {
  final AsyncValue hotRecommendsData;

  const HotRecommends({
    super.key,
    required this.hotRecommendsData,
  });

  @override
  State<HotRecommends> createState() => _HotRecommendsState();
}

class _HotRecommendsState extends State<HotRecommends> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: widget.hotRecommendsData.when(
        data: (data) {
          return AlignedGridView.count(
            crossAxisCount: 2,
            mainAxisSpacing: 2,
            crossAxisSpacing: 16,
            itemCount: data.hotRecommends.length,
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (context, index) {
              final item = data.hotRecommends[index];
              return SizedBox(
                width: 14,
                height: 110,
                child: Column(
                  children: [
                    SizedBox(
                      height: 40,
                      child: Row(
                        children: [
                          Expanded(
                            child: Text(
                              homePageLanguage(item.title ?? ""),
                              style: const TextStyle(
                                fontSize: 20,
                                color: Colors.black,
                              ),
                              textAlign: TextAlign.center,
                              overflow: TextOverflow.ellipsis,
                              maxLines: 1,
                            ),
                          ),
                          Expanded(
                            child: Text(
                              homePageLanguage(item.caption ?? ""),
                              style: TextStyle(
                                fontSize: 16,
                                color: Colors.grey.shade600,
                              ),
                              textAlign: TextAlign.center,
                              overflow: TextOverflow.ellipsis,
                              maxLines: 1,
                            ),
                          )
                        ],
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Row(
                        children: [
                          Expanded(
                            flex: 1,
                            child: SizedBox(
                              child: CustomCacheImageWidget(
                                imageUrl: item.leftIcon ?? "",
                                width: 100.0,
                                height: 100.0,
                              ),
                            ),
                          ),
                          const SizedBox(
                            width: 4,
                          ),
                          Expanded(
                            flex: 1,
                            child: SizedBox(
                              child: CustomCacheImageWidget(
                                imageUrl: item.rightIcon ?? "",
                                width: 100.0,
                                height: 100.0,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              );
            },
          );
        },
        error: (error, StackTrace) => Center(
          child: Center(
            child: Column(
              children: [
                Icon(
                  Icons.dangerous,
                  color: Colors.red,
                  size: 30,
                ),
                Text(
                  "數據錯誤，請稍後再試",
                  style: TextStyle(fontSize: 16.0),
                )
              ],
            ),
          ),
        ),
        loading: () => AlignedGridView.count(
          crossAxisCount: 4,
          crossAxisSpacing: 2,
          mainAxisSpacing: 22,
          itemCount: 8,
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            return Shimmer.fromColors(
              baseColor: Colors.grey.shade300,
              highlightColor: Colors.grey.shade400,
              child: Column(
                children: [
                  Container(
                    width: 60.0,
                    height: 10,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        color: Colors.teal),
                  ),
                  SizedBox(
                    height: 8,
                  ),
                  Container(
                    width: 60.0,
                    height: 60.0,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10.0),
                      color: Colors.teal,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}
